<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>助老服务管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" class="user-search">
      <el-form-item label="服务提交日期：">
        <el-date-picker v-model="dateRange" type="daterange" :picker-options="pickerOptions" size="small"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="query()">查询</el-button>
      </el-form-item>
    </el-form>
    <div style="height: 15px;"></div>
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中">
      <el-table-column align="center" label="订单编号" prop="order.orderCode"></el-table-column>
      <el-table-column align="center" label="订单时间" width="140">
        <template slot-scope="scope">
          <div>{{scope.row.order.orderTime|timestampToDayHM}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="orderTitle" label="商品列表" width="300">
        <template slot-scope="scope">
          <div v-for="(item,id) in scope.row.itemVos" :key="id" class="pitems">
            <el-avatar shape="square" size="medium" :src="item.product.pic" style="float: left;"></el-avatar>
            <span class="opname">{{ item.product.name }} * {{ item.item.qutity }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="price" label="订单总额">
        <template slot-scope="scope">
          ￥<span class="price">{{ scope.row.order.totalPrice|amountString }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="status" label="订单状态">
        <template slot-scope="scope">
          <!--1-待支付；2-已支付待发货；3-已发货；4-已完成；-1：已取消-->
          <el-tag size="small" type="info" v-if="scope.row.order.status==-1">已取消</el-tag>
          <el-tag size="small" type="danger" v-if="scope.row.order.status==1">待支付</el-tag>
          <el-tag size="small" type="warning" v-if="scope.row.order.status==2">待发货</el-tag>
          <el-tag size="small" type="success" v-if="scope.row.order.status==3">已发货</el-tag>
          <el-tag size="small" type="success" v-if="scope.row.order.status==4">已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="240">
        <template slot-scope="scope">
          <el-button size="mini" v-if="scope.row.order.status==2" class="green-button" @click="handleEdit(scope.row.order)">发货</el-button>
          <el-button size="mini" v-if="scope.row.order.status==1" class="orange-button" @click="onCancel(scope.row.order, -1)">取消</el-button>
          <el-button size="mini" type="primary" @click="handleDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
    <!-- 编辑界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="60%"
      :close-on-click-modal=false
      @click="closeDialog"
    >
      <el-form
        label-width="120px"
        :model="editForm"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="订单编号">
          <el-input
            size="small"
            :value="editForm.orderCode"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="快递单号" prop="expNo">
          <el-input
            size="small"
            v-model="editForm.expNo"
            auto-complete="off"
            placeholder=""
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          v-loading.fullscreen.lock="fullscreenLoading"
          @click="submitForm('editForm')"
          >确定</el-button
        >
      </div>
    </el-dialog>

    <!--详情对话框-->
    <el-dialog
      title="订单详情"
      :visible.sync="detailVisible"
      width="60%"
      :close-on-click-modal=false
      :show-close="true"
    >
    <el-descriptions class="margin-top" :column="2" border v-if="currDetailData!=null">
      <el-descriptions-item label="订单编号">{{currDetailData.order.orderCode}}</el-descriptions-item>
      <el-descriptions-item label="商品内容">
        <div v-for="(item,id) in currDetailData.itemVos" :key="id">
          <el-avatar shape="square" size="medium" :src="item.product.pic"></el-avatar>
          <span class="opname">{{ item.product.name }} * {{ item.item.qutity }}</span>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="订单金额">
        ￥
        <span style="font-size: 22px; color: #d4571d;">
          {{ currDetailData.order.totalPrice|amountString }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label="收件人">{{currDetailData.order.receiveName}}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{currDetailData.order.mobile}}</el-descriptions-item>
      <el-descriptions-item label="收件地址">{{currDetailData.order.fullAddress}}</el-descriptions-item>
      <el-descriptions-item label="备注">{{currDetailData.order.remark}}</el-descriptions-item>
      <el-descriptions-item label="快递单号">
        <span v-if="currDetailData.order.expNo==null" style="color: #999;">未获取到物流信息</span>
        <span v-else>{{currDetailData.order.expNo}}</span>
      </el-descriptions-item>
    </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination.vue";
import { GetServiceList, CancelServiceStatus } from '@/api/api.js'

export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      detailVisible: false, //详情对话框显示与隐藏
      title: "添加",
      editForm: {
        orderId: '',
        orderCode: '',
        expNo: '',
        status: ''
      },
      currDetailData: null,
      // rules表单验证
      rules: {
        expNo: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      formInline: {
        kw: "",
        currentPage: 1,
        pageSize: 10,
        startTime: '',
        endTime: ''
      },
      listData: [], //列表数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      fullscreenLoading: false,
      pickerMinDate: '',
      dateRange: [],
      pickerOptions: {
        
      },
    }
  },
  // 注册组件
  components: {
    Pagination,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取获奖列表
    getdata(parameter) {
      this.loading = true;
      if(this.dateRange.length>0){
        parameter.startTime=this.dateRange[0]
      }
      if(this.dateRange.length>1){
        parameter.endTime=this.dateRange[1]
      }
      GetServiceList(parameter)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.listData = res.data.records;
            this.pageparm.currentPage = res.data.currentPage;
            this.pageparm.pageSize = res.data.pageSize;
            this.pageparm.total = res.data.totalrecord;
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.editFormVisible = false;
          this.loading = false;
          this.$message.error("获取数据失败，请稍后再试！");
        });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.currentPage = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.formInline.total = parm.total
      this.getdata(this.formInline);
    },
    // 搜索事件
    query() {
      this.getdata(this.formInline);
    },
    //显示发货界面
    handleEdit: function (row) {
      this.editFormVisible = true;
      this.title = "订单发货";
      this.editForm.orderId = row.orderId
      this.editForm.orderCode = row.orderCode
      this.editForm.expNo = ''
      this.editForm.status = 3
    },
    
    // 取消服务
    onCancel(order){
      this.$confirm('确认要取消该服务吗？', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let req={
          oid: order.orderId,
          status: -1
        }
        CancelServiceStatus(req).then((res) => {
          if (res.code==0) {
            this.$message({
              type: 'success',
              message: '服务已取消'
            })
            this.getdata()
          } else {
            this.$message.error(res.msg);
          }
        }).catch((err) => {
          this.$message.error("取消失败！");
        });
      })
    },
    //显示详情界面
    handleDetail: function (row) {
      console.log(row)
      this.currDetailData = row
      this.detailVisible = true
      console.log('显示详情：',this.currDetailData)
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
    closeDialog2() {
      this.detailVisible = false;
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.pitems{
  clear: both;
  height: 38px;
  line-height: 38px;
  text-align: left;
}
.pitems .opname{
  padding-left: 10px;
}
</style>

 
 